<template>
  <lay-menu v-model:selected-key="selectedKey" v-model:open-keys="openKeys1" theme="light" style="background-color: orange" id="menus">
    <lay-menu-item><a href='/'>网站首页</a></lay-menu-item>
    <lay-menu-item><a href='/calendar'>山西高考日历</a></lay-menu-item>
    <lay-sub-menu v-for="(menuItem, index) in MenuList" :key="index" :index="index">
      <template #title>{{menuItem.name}}</template>
      <lay-menu-item v-for="(val, index) in menuItem.children" :index="val.url" :key="index">
        <span><a :href="val.url">{{val.name}}</a></span>
      </lay-menu-item>
    </lay-sub-menu>
  </lay-menu>
</template>
<script>
import {onMounted, reactive, ref, toRefs} from 'vue'
import {getFrontMenuJson} from '../api/menu'
export default {
  name: 'menuTree',
  setup() {
    const selectedKey = ref("5")
    const openKeys1 = ref(["7"])
    const active1 = ref("1")
    const state = reactive({
      content: "",
      MenuList: []
    })
    // 调取api获取数据
    const getMenuList = () => {
      getFrontMenuJson().then(res => {
        console.log("===============");
        state.MenuList = res.data.children
      })
    }
    onMounted(getMenuList)
    // ...toRefs()将state里面得对象解构
    return {
      ...toRefs(state),
      selectedKey,
      openKeys1,
      active1
    };
  },
};
</script>
